<style type="text/css" scoped="scoped">
header{position: fixed;
    width: 100%;
    top: 0;
    z-index: 999;}
	.positionR{position: absolute !important; right: 3%;top: 5px;}
	.logo {height: 60px;}
	.search{margin-left: 10%;}
	.clearfix:after{content: ''; display: block; clear: both; }
	.home{color: white;}
	.share{font-size: 28px !important;}
	  @media only screen and (max-width: 640px) {
	  	.positionR{right: 0;}
	  	.search{margin-left: -50px !important;}
	  }
	
</style>
<template>
	<header class="clearfix">
	<Menu mode="horizontal" :theme="theme1" active-name="1" >
		 <MenuItem name="logo">
		<img class="logo" src="../images/logo.png"/>
		</MenuItem>
		<MenuItem name="1">
		<Icon type="home"></Icon>
		<router-link to="/" class='home'>首页</router-link>
		</MenuItem>

		<MenuItem name="2" class="search">
    	<Input class="search" v-model="value" @keyup.13.native="turnToSearch()"  autofocus="autofocus" placeholder="搜索..." clearable style="width: 200px"></Input>
		</MenuItem>
	
		<MenuItem name="login" class="positionR">
		<Icon type="share" class='share'></Icon>
		 </MenuItem>
	</Menu>



</header>
</template>

<script>
	export default {
		data() {
			return {
				theme1: 'dark',
				value: ''
			}
		},
		methods:{
			turnToSearch () {
				var regexps=/<\/?.+?>/g;
				if(this.value==''){
					this.info(true);
					return;
				}
				if(regexps.test(this.value)){
					this.warning(true);
					return;
				}
				if(this.value!=''){
					const value=this.removeTag(this.value);
					this.$router.push({path: '/search', query: {val: value}});
					this.$parent.$parent.reload();
					return;
				}

			},
			 info (nodesc) {
                this.$Notice.info({
                    title: '搜索框为空',
                    desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
                });
            },
             warning (nodesc) {
                this.$Notice.warning({
                    title: '非法输入',
                    desc: nodesc ? '' : 'Here is the notification description. Here is the notification description. '
                });
            },
			
		}
		
	}
</script>